/**
 * Created by Kylin on 2016/12/7.
 */
import React, {Component, PropTypes} from 'react';

export default class TabShow extends Component {
    renderFilter(filter, name) {
        if (filter === this.props.filter) return name;

        return (<a href="#" onClick={
            e => {
                e.preventDefault();
                this.props.onFilterChange(filter);
            }}>{name}</a>)
    }

    render() {
        return (
            <div>
                Show:
                {' '}
                {this.renderFilter('SHOW_ALL', 'ALL')}
                {', '}
                {this.renderFilter('SHOW_COMPLETED', 'Completed')}
                {', '}
                {this.renderFilter('SHOW_ACTIVE', 'Active')}
                .
            </div>
        )
    }
}
TabShow.propTypes = {
    onFilterChange: PropTypes.func.isRequired,
    filter: PropTypes.oneOf(['SHOW_ALL', 'SHOW_COMPLETED', 'SHOW_ACTIVE']).isRequired
};